<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item :title="item.category_name" :name="item.category_id" v-for="item in bzzxList" :key="item.category_id">
				<div class="text_f color_six pointer" v-for="ite in item.data" :key="ite.id" @click="goProblemInfo(ite.id)">{{ite.name}}</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import {
		helpcenter
	} from "@/API/system"
	export default {
		data() {
			return {
				 activeName: '0',
				 bzzxList:[],
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				helpcenter().then(res=>{
					this.bzzxList = res.data.data
				})
			},
			
			goProblemInfo(id){ //问题详情
				this.$router.push({
					path:"/setUp/helpdetail",
					query:{
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-collapse{
		border: none;
	}
	::v-deep .el-collapse-item{
		border-radius: 8px 8px 8px 8px;
		border: 1px solid #EAEAEA;
		overflow: hidden;
		padding: 0 20px;
		margin-top: 20px;
	}
</style>